<template>
  <div>
    <h1>watch监视 情况四 ：监视【reactive】定义的【对象类型】数据</h1>
    <div>姓名：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
    <div>第一台车：{{ person.car.c1 }}</div>
    <div>第二台车：{{ person.car.c2}}</div>
    <button @click="changeAge">修改年龄</button><br>
    <button @click="changeName">修改姓名</button><br>
    <button @click="changeC1">修改C1</button>
    <button @click="changeC2">修改C2</button>
    <button @click="changeCar">修改Car</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { reactive, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 18,
  car:{
    c1:"兰博基尼",
    c2:"法拉利"
  }
});
function changeAge() {
  person.age += 1;
}
function changeName() {
  person.name += "~";
}
function changeC1() {
  person.car.c1 = "大众";
}
function changeC2() {
  person.car.c2 = "保时捷";
}
function changeCar(){
  Object.assign(person.car,{c1:'爱玛',c2:'雅迪'})
}
//监视以上多个属性
const stopWatch = watch([()=>person.name,()=>person.car.c1], (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
</script>
<style>

</style>